<style include="scanning-shared">
  #actionToolbar {
    align-items: center;
    background-color: rgba(var(--google-grey-900-rgb), .8);
    border-radius:  calc(var(--action-toolbar-height) / 2);
    display: flex;
    height: var(--action-toolbar-height);
    justify-content: center;
    width: var(--action-toolbar-width);
  }

  .separator {
    background-color: white;
    border-inline-start: var(--cr-separator-line);
    flex-shrink: 0;
    height: 22px;
    margin: 0 16px;
    opacity: .14;
  }

  cr-icon-button {
    --cr-icon-button-fill-color: var(--google-grey-200);
    --cr-icon-button-hover-background-color:
          rgba(var(--google-grey-900-rgb), .4);
    --cr-icon-button-margin-start: 0;
    --cr-icon-button-size: 24px;
  }

  #pageNumbers {
    color: var(--scanning-action-toolbar-text-color);
    font-family: var(--scanning-action-toolbar-font-family);
    font-size: var(--scanning-action-toolbar-font-size);
    font-weight: var(--scanning-medium-font-weight);
    line-height: var(--scanning-action-toolbar-line-height);
  }

  #removePageIcon {
    --cr-icon-button-margin-end: 16px;
    --cr-icon-image: url(svg/remove_page.svg);
  }

  #rescanPageIcon {
    --cr-icon-image: url(svg/rescan_page.svg);
  }
</style>
<div id="actionToolbar">
  <div id="pageNumbers" aria-hidden="true">[[pageNumberText_]]</div>
  <div class="separator"></div>
  <div>
    <cr-icon-button id="removePageIcon" on-click="onRemovePageIconClick_"
        title="[[i18n('removePageButtonLabel')]]">
    </cr-icon-button>
    <cr-icon-button id="rescanPageIcon" on-click="onRescanPageIconClick_"
         title="[[i18n('rescanPageButtonLabel')]]">
    </cr-icon-button>
  </div>
</div>
